// 引入 echarts 文件
import * as echarts from '../../ec-canvas/echarts';
import api from "../../api/report.js";
// 定义 initChart 方法
// initChart 需要传递四个参数 canvas, width, height, dpr
function setOption(chart, data) {
  const xAxis_data = []
  // for (let i = 0; i < 12; i++) {
  //   xAxis_data.push((i + 1) + '月')
  // }
  const series_data = []
  data?.forEach(ele => {
    const month = new Date(ele.beginDate).getMonth() + 1
    xAxis_data.push(month + '月')
    series_data.push(ele.totalSum)
  })
  var option = {
    xAxis: [{
      type: 'category',
      data: xAxis_data.reverse(),
      axisTick: {
        interval: 0,
        alignWithLabel: true,
        show: false
      }
    }],
    yAxis: [{
      type: 'value'
    }],
    series: [{
      type: 'line',
      smooth: true,
      data: series_data.reverse()
    }],
    grid: {
      left: "3%",
      top: "10%",
      bottom: '10%',
      containLabel: true
    },
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: data.length > 0, // 有数据就隐藏
      style: {
        fill: '#9d9d9d',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '20px'
      }
    }
  };
  chart.setOption(option)
}

function _timeFormat(time) {
  var time = new Date(time);
  let year = time.getFullYear();
  return year + '年'
}

Page({
  data: {
    monthList: [],
    echartsShow: true,
    // 此处的ec名称与wxml结构中命名保持一致
    ec: {
      // 使用 onInit 方法定义
      lazyLoad: true
    },
    year: _timeFormat(new Date().getTime()),
    currentDate: new Date().getTime(),
    minDate: new Date('2023/12').getTime(),
    formatter: (type, value) => {
      if (type === 'year') {
        return `${value}年`;
      }
      if (type === 'month') {
        return ''
      }
    },
    showSheet: false
  },
  onLoad() {
    this.oneComponent = this.selectComponent('#myChart');
    this.getOption()
  },
  onInput(event) {
    const date = new Date(event.detail);
    const year = date.getFullYear();
    this.setData({
      currentDate: event.detail,
      year: year + '年',
    });
  },
  async getOption() {
    const res = await api.monthReport({
      year: new Date(this.data.currentDate).getFullYear()
    })
    this.setData({
      monthList: res.data
    })
    this.init_chart(res.data)
  },
  init_chart(data) { // 初始化第一个图表
    this.oneComponent.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 设备像素比
      });
      setOption(chart, data)
      this.chart = chart;
      return chart;
    });
  },
  onShowTimer() {
    this.setData({
      showSheet: true,
      echartsShow: false
    });
  },
  onClose() {
    this.setData({
      showSheet: false,
      echartsShow: true
    });
    this.getOption()
  },
  onMonthTable(e) {
    console.log(e)
    const item = e.currentTarget.dataset.item
    wx.navigateTo({
      url: '/pages/monthTable/index?item=' + JSON.stringify(item),
    })
  }
})